<template>
  <div class="chart-container">
    <!-- 统一的下拉菜单（保留原index.vue的下拉框） -->
    <div class="symbol-selector">
      <el-select v-model="selectedSymbol" placeholder="请选择股票代码" style="width: 200px; margin-bottom: 20px" @change="handleSymbolChange">
        <el-option v-for="symbol in symbols" :key="symbol" :label="symbol" :value="symbol" />
      </el-select>
    </div>

    <!-- 所有图表组件通过:symbol绑定统一的selectedSymbol -->
    <el-card style="margin-bottom: 20px; height: 90vh; overflow-y: auto">
      <BasicCandliestick :symbol="selectedSymbol" />
    </el-card>
    <el-card style="margin-bottom: 20px; height: 90vh; overflow-y: auto">
      <KLineChart :symbol="selectedSymbol" /> <!-- 新增：使用改造后的组件 -->
    </el-card>
    <el-card style="margin-bottom: 20px; height: 90vh; overflow-y: auto">
      <OHLC :symbol="selectedSymbol" />
    </el-card>
    <el-card style="margin-bottom: 20px; height: 90vh; overflow-y: auto">
      <Candlestick :symbol="selectedSymbol" />
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import KLineChart from '@/components/ECharts/KLineChart.vue';  // 引入新组件
import OHLC from '@/components/ECharts/OHLC.vue';
import BasicCandliestick from '@/components/ECharts/BasicCandliestick.vue';
import Candlestick from '@/components/ECharts/Candlestick.vue';
import { listSymbols } from '@/api/market/market';

const selectedSymbol = ref('AAPL');
const symbols = ref<string[]>([]);

// 获取股票代码列表（与原逻辑一致）
const fetchSymbols = async () => {
  try {
    const response = await listSymbols();
    symbols.value = response.data;
  } catch (error) {
    console.error('Error fetching symbols:', error);
  }
};

onMounted(async () => await fetchSymbols());

const handleSymbolChange = (newSymbol: string) => {
  selectedSymbol.value = newSymbol;
};
</script>

<style scoped>
.el-row {
  margin-bottom: 20px;
}

.el-col {
  padding: 0 10px;
}
</style>
